<template>
  <input type="text" v-model="keyword">
  <h2>{{keyword}}</h2>
</template>

<script>
import { customRef } from 'vue'
  export default {
    name:'App',
    setup(){
      let timer
      //自定义ref
      function myRef(value,delay){
        return customRef((track,trigger)=>{
          return {
            get(){
              console.log(`有人从myRef中读取数据了，读取的数据为${value}`);
              track() //通知vue追踪value的变化(提前和get商量一下，让它认为这个value是有用的)
              return value
            },
            set(newValue){
              console.log(`有人修改数据了，修改后的数据为：${newValue}`);
              clearTimeout(timer)
              timer = setTimeout(()=>{
                value = newValue
                trigger() //通知vue重新解析模板
              },delay)
            }
          }
        })
      }

      let keyword = myRef('hello',1000)//使用自定义的ref

      return {
        keyword
      }
    }
  }
</script>

<style>

</style>